<template>
  <div class="box">
    <h3><span>|</span>用户统计</h3>
    <el-row :gutter="12">
      <el-col :span="5" class="card1">
        <el-card shadow="always">
          <div class="content">
            <span class="iconfont">&#xe602;</span>
            <div>
              <p>总用户数</p>
              <p>{{ userCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card2">
        <el-card shadow="hover">
          <div class="content">
            <span class="iconfont">&#xe606;</span>
            <div>
              <p>近1个月新增用户</p>
              <p>{{ curentCount }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" class="card3">
        <el-card shadow="hover"
          ><div class="content">
            <span class="iconfont">&#x100f1;</span>
            <div>
              <p>近1个月付款数</p>
              <p>{{curentPay}}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import iconfont from "@/assets/font/iconfont.css";
import { userdata } from "@/api/userdata.js";
import { usedataStore } from "@/stores/data.js"
import { ref } from "vue";

// 激活仓库
const dataStore = usedataStore();
const { timeTrans } = usedataStore();
// 用户列表
// const userList = ref([]);
// 用户总数
const userCount = ref(0);
// 近一个月用户数据列表
const curentList = ref([]);
// 近一个月新增用户总数
const curentCount = ref(0);
// 近一个月支付总数
const curentPay = ref(0);
// 定义函数 获取用户列表
function getUserList() {
  userdata()
    .then((res) => {
      // console.log(res);
      const data = res.data.data.userList.data.userList;
      dataStore.userList=data;
      userCount.value = data.length;

      // 过滤 获取近一个月的新增用户数
      curentList.value = dataStore.userList.filter((user) => {
        // 将时间格式转换为 Wed Dec 14 2022 17:42:53 GMT+0800 (中国标准时间)
        const createTime = new Date(timeTrans(user.createTime));
        const today = new Date();
        const isThisYear = createTime.getFullYear() === today.getFullYear();
        const isThisMonth = createTime.getMonth() === today.getMonth();
        return isThisYear && isThisMonth;
      });
      // console.log(curentList.value, "过滤数据");
      curentCount.value = curentList.value.length;
      for (let item of curentList.value) {
        curentPay.value += Number(item.payCount);
       
      } 
      // console.log(curentPay.value);
    })
    .catch((err) => {
      console.log("error");
    });
}
getUserList();


</script>

<style lang="less" scoped>
.box {
  width: 100%;
  // height: 200px;
  // border: 1px solid gainsboro;
  border-radius: 20px;
  background-color: white;
  h3 {
    padding: 30px 0 0 30px;
    span {
      padding-right: 10px;
    }
  }
  .el-row {
    padding: 30px;
    .el-card {
      border-radius: 14px;
      height: 90px;
    }
    .card1 {
      .el-card {
        background-color: pink;
        color: white;
        .content {
          display: flex;
          span {
            width: 40px;
          }
          p {
            line-height: 26px;
            margin-left: 20px;
          }
        }
      }
    }
  }
  .card2 {
    .el-card {
      background-color: rgb(150, 212, 238);
      color: white;
      .content {
        display: flex;
        span {
          width: 40px;
        }
        p {
          margin-left: 20px;
          line-height: 26px;
        }
      }
    }
  }
  .card3 {
    .el-card {
      background-color: rgb(29, 164, 219);
      color: white;
      .content {
        display: flex;
        span {
          width: 40px;
        }
        p {
          line-height: 26px;
          margin-left: 20px;
        }
      }
    }
  }
}
.iconfont:hover {
  font-size: 40px;
  color: white;
}
</style>
